<template>
  <div class="chengshi">
    <el-form-item
      class="city-box"
      label-width="120px"
      label="城市："
      prop="province"
    >
      <el-select
        class="city-1"
        v-model="form.value"
        placeholder="请选择"
        @change="city"
      >
        <el-option
          :label="item"
          :value="item"
          v-for="(item, i) in Provinces"
          :key="i"
        >
        </el-option>
      </el-select>
      <el-select
        class="city-2"
        v-model="form.CitysValue"
        placeholder="请选择"
        @change="citys"
      >
        <el-option
          :label="item"
          :value="item"
          v-for="(item, i) in Citys"
          :key="i"
        >
        </el-option>
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  name: 'Chengshi',
  prop: {
    type: Object,
    required: true
  },
  data() {
    return {
      // 定义城市省份
      Provinces: [],
      form: {
        value: '',
        CitysValue: ''
      },
      // 定义地方
      Citys: []
    }
  },
  created() {
    this.getProvince()
  },
  methods: {
    // 获取城市
    async getProvince() {
      try {
        const res = await provinces()
        // console.log(res)
        this.Provinces = res
      } catch (err) {
        console.log('错误')
      }
    },
    // 获取地方
    async getcitys(value) {
      try {
        const res = await citys(value)
        // console.log(res)
        this.Citys = res
      } catch (err) {
        console.log('错误')
      }
    },
    // 当我们的oplest选择选发生改变时
    city() {
      // 先情况第二个选择框的值
      this.form.CitysValue = ''
      this.getcitys(this.form.value)
    },
    // 当选中项第二个发生变化时触发
    citys() {
      this.$emit('Provinces', this.form)
    }
  }
}
</script>

<style lang="less" scoped>
.city-1 {
  width: 48%;
  margin-right: 4%;
}
.city-2 {
  width: 48%;
}
</style>
